<template>
    <div class="container-wrapper">
        <el-select
                v-if="showType != 4 && showCategory"
                v-model="filter.category"
                size="small"
                placeholder=" "
                @change="handleCategoryChange"
                class="filter-segment"
                :class="{ active: showWarning}">
            <el-option
                    v-for="(item,index) in releaseSegment"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        <div class="filter-wrapper"  v-if="showType != 4">
            <div class="filter-left">
                <el-select
                        v-model="filter.updateTime"
                        size="small"
                        placeholder=" "
                        class="filter-item0"
                        @change="handleTimeChange">
                    <el-option
                            v-for="(item,index) in releaseTime"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-if="showDateRange"
                        @change="handleDateRangeChange"
                        size="small"
                        style="margin-left: 10px"
                        v-model="filter.dateRange"
                        type="daterange"
                        :clearable="false"
                        :placeholder="filter.dateRange ? ' ' : '请选择日期范围'">
                </el-date-picker>
            </div>
            <div class="filter-right">
                <el-select
                        v-model="filter.target"
                        size="small"
                        class="filter-item1"
                        placeholder=" "
                        @change="handleTargetChange"
                        v-if="showType == 1 || showType == 2">
                    <el-option
                            v-for="(item,index) in releaseAim"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

                <el-select
                        v-model="filter.status"
                        @change="handleStatusChange"
                        size="small"
                        placeholder=" "
                        v-if="showType == 1"
                        class="filter-item1">
                    <el-option
                            v-for="(item,index) in releaseStatus"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

                <el-select
                        v-model="filter.status"
                        @change="handleStatusChange"
                        size="small"
                        placeholder=" "
                        v-if="showType != 1"
                        class="filter-item1">
                    <el-option
                            v-for="(item,index) in releaseStatus1"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

                <el-input
                        class="filter-item2"
                        size="small"
                        :placeholder="placeholder"
                        icon="search"
                        :on-icon-click="handleIconClick"
                        @keyup.enter.native="handleIconClick"
                        v-model="filter.search">
                </el-input>

                <div class="line"></div>

                <el-button v-if="!exportStatus" class="com-button" @click="handleExport" :disabled="!enableExport">

                    <div class="export-txt">
                        <i class="iconfont icon-export2"></i> 导出
                    </div>
                </el-button>

                <el-button v-else="exportStatus" :loading="true" class="com-button">导出中</el-button>
            </div>
        </div>

        <div class="test-filter" v-if="showType == 4 && budgetData">
            <div class="tip-wrapper">
                <span>单日预算: ￥ {{budgetData.budgetAmount }}</span>
                <span>排期: {{budgetData.startTime}} - {{budgetData.endTime}} （共{{budgetData.days}}天）</span>
            </div>

            <div class="line"></div>

            <div class="filter-wrapper1">
                <el-autocomplete
                        size="small"
                        class="inline-input"
                        v-if="!showEmpty"
                        v-model="filter.searchSeries"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入广告系列名称"
                        @select="handleSearchSelect"
                        icon="search">
                </el-autocomplete>

                <el-input
                        class="inline-input"
                        size="small"
                        v-if="showEmpty"
                        placeholder="请输入广告系列名称"
                        @focus="showEmptyWrapper = true"
                        @blur="showEmptyWrapper = false"
                        icon="search">
                </el-input>
                <div v-if="showEmptyWrapper" class="empty-wrapper">
                    <div class="empty-content">
                        <div style="width: 100%">
                            <img src="../../../assets/img/no-search-data.png">
                        </div>
                        <span>查询无结果</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="shadow"></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { mapGetters} from 'vuex';
    import { Message, Select, Option, Input ,DatePicker , Autocomplete, Button} from 'element-ui'
    import { releaseTime, releaseAim, releaseStatus ,releaseStatus1 ,releaseSegment } from '~/assets/js/option'
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(DatePicker);
    Vue.use(Autocomplete);
    Vue.use(Button);

    export default{
        data(){
            return {
                showDateRange: false,
                showWarning: false,
                releaseTime: releaseTime,
                releaseAim: releaseAim,
                releaseStatus: releaseStatus,
                releaseStatus1: releaseStatus1,
                releaseSegment: releaseSegment,
                filter:{
                    updateTime: '',
                    dateRange: '',
                    target: '',
                    status: '',
                    search: '',
                    category: '',
                    searchSeries: ''
                },
                searchOptions: [],
                showEmpty: false,
                showEmptyWrapper: false
            }
        },
        props:{
            'showType': {
                default: true
            },
            'showCategory': {
                default: false
            },
            'exportUrl': {
                default: ''
            }
        },
        methods: {
            getAbTestSeries() {
                if(this.showType == 4){
                    this.$store.dispatch('adSeriesItemList')
                        .then((response)=>{
                            var result=response.data;
                            if(result && result.code == 1){
                                this.searchOptions = result.data;
                                if(this.searchOptions.length>0){
                                    for(var i=0;i<this.searchOptions.length;i++){
                                        this.searchOptions[i]['value'] = this.searchOptions[i]['name']
                                    }
                                }else {
                                    this.showEmpty = true;
                                }
                            }else {
                                this.showEmpty = true;
                            }
                        })
                        .catch((error) => {
                            this.showEmpty = true;
                        })
                }
            },
            handleTimeChange(val) {
                if(val == 'OPTION6') {
                    this.showDateRange = true;
                }else {
                    if(!val){
                        val='LIFETIME'
                    }
                    this.showDateRange = false;
                    this.filter.dateRange = '';
                    this.$parent['filterData'](val,0);
                }
            },
            handleDateRangeChange(val){
                if(val){
                    this.$parent['filterData'](val,7);
                }
            },
            handleTargetChange(val) {
                this.$parent['filterData'](val,1);
            },
            handleStatusChange(val){
                this.$parent['filterData'](val,2);
            },
            handleCategoryChange(val){
                this.$parent['filterData'](val,3);
            },
            handleIconClick() {
                this.$parent['filterData'](this.filter.search,4);
            },
            handleExport() {
                if(this.filter.updateTime == 'OPTION6' && !this.filter.dateRange ){
                    Message.warning({
                        message: '请先选择日期范围'
                    });
                    return;
                }
                this.$parent['filterData'](this.filter,6);
            },
            //搜索类型
            querySearch(queryString, cb) {
                var searchOptions = this.searchOptions;
                var results = queryString ? searchOptions.filter(this.createFilter(queryString)) : searchOptions;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (typeOption) => {
                    return (typeOption.value.indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSearchSelect(val) {
                this.$parent['filterData'](val,5);
            }
        },
        computed : {
                ...mapGetters({
                    'managerIndex' : 'getManagerIndex',
                    'budgetData' : 'getBudgetData',
                    'exportStatus': 'getExportStatus',
                    'enableExport': 'getEnableExport'
                }),
                placeholder: function () {
                    switch (this.showType){
                        case 1:
                            return '请输入广告系列名称';
                            break;
                        case 2:
                            return '请输入广告组名称';
                            break;
                        case 3:
                            return '请输入广告名称';
                            break;

                    }
                }
        },
        created() {
            this.getAbTestSeries();
        }

    }
</script>

<style scoped lang="scss">
    .container-wrapper {
        a{
            color: currentColor;
            .export-txt{
                width: 100%;
                height: 100%;
                padding-top: 6px;
            }
        }
        position: relative;
        max-width: 1200px;
        .menu-wrapper{
            margin-top: 16px;
            height: 50px;
            background: #FFFFFF;
            border: 1px solid #EAEEF0;
            border-radius: 4px 4px 0 0;
            .item {
                height: 47px;
                font-size: 16px;
                color: #666666;
                letter-spacing: 0;
                line-height: 50px;
                float: left;
                margin: 0 25px;
                cursor: pointer;
            }
            .item.active {
                font-family: MicrosoftYaHei-Bold;
                color: #0686F9;
                border-bottom: 3px solid #0686F9;
            }
        }
        .filter-wrapper {
            height: 70px;
            background: #FFFFFF;
            padding: 0 25px;
            border: 1px solid #EAEEF0;
            .filter-left {
                float: left;
                margin-top: 20px;
                .filter-item0 {
                    width: 130px;
                }
            }
            .filter-right {
                float: right;
                margin-top: 20px;
                .filter-item1 {
                    float: left;
                    width: 100px;
                    margin-right: 10px;
                }
                .filter-item3 {
                    float: left;
                    width: 120px;
                    margin-right: 10px;
                }
                .filter-item2 {
                    float: left;
                    width: 180px;
                    margin-right: 10px;
                }
                .icon-export {
                    color: #B0BEC5;
                    margin-right: 5px;
                }
                .line {
                    float: left;
                    width: 2px;
                    height: 14px;
                    margin: 10px 15px 0 10px;
                    background: #E8E8E8;
                }
            }
        }
        .shadow {
            width: 100%;
            height: 2px;
            background: #F7F7F7;
            border: 1px solid #EAEEF0;
            border-radius: 4px;
            float: left;
        }
        .filter-segment {
            position: absolute;
            width: 160px;
            top: 83px;
            right: 21px;
            z-index: 999;
        }
        .filter-segment.active {
            top: 115px;
        }
        .test-filter {
            border: 1px solid #eaeef0;
            .tip-wrapper{
                padding: 0 25px;
                height: 50px;
                line-height: 50px;
                font-size: 13px;
                background: #fff;
                color: #666666;
                span{
                    margin-right: 20px;
                }
            }
            .line {
                width: 1160px;
                margin-left: 20px;
                height: 2px;
                float: left;
                background: #EAEEF0;
            }
            .filter-wrapper1 {
                height: 70px;
                background: #fff;
                padding: 0 25px;
                .inline-input {
                    float: right;
                    width: 400px;
                    margin-top: 20px;
                }
                .empty-wrapper {
                    position: absolute;
                    right: 26px;
                    width: 400px;
                    background: #fff;
                    height: 250px;
                    top: 110px;
                    z-index: 100;
                    border-radius: 5px;
                    box-shadow: 1px 0 8px #d3d4d6;
                        .empty-content {
                            position: absolute;
                            text-align: center;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            img {
                                width: 100px;
                                height: 100px;
                            }
                            span {
                                font-size: 13px;
                                color: #0686F9;
                                letter-spacing: 0;
                                margin: 20px 0 0 -26px;
                                display:inline-block;
                            }
                        }
                }
            }
        }
    }
</style>